<template>
  <div id="index">
    <pageHeader></pageHeader>
    <transition name="fade" mode="out-in">
      <router-view />
    </transition>
    <pageFooter></pageFooter>
  </div>
</template>

<script>
import PageHeader from '@/views/pageHeader'
import PageFooter from '@/views/pageFooter'

export default {
  name: 'app',
  components: {
    pageHeader: PageHeader,
    pageFooter: PageFooter
  },
  data () {
    return {
      bankVisible: false
    }
  },
  created () {
    this.bankVisible = true
  },
  computed: {
    nowpath () {
      return this.$route.fullPath
    }
  }

  // mounted: function () {
  //   if (this.$route.path !== '/index') {
  //     this.$store.dispatch('pageContentHide')
  //   } else {
  //     this.$store.dispatch('pageContentShow')
  //   }
  // },
  // watch: {
  //   $route: function (to, from) {
  //     this.$store.dispatch('pageNumberReset') // 当路由改变时，将文章列表当前第几页的信息重置为第1页
  //     if (to.path !== '/index') {
  //       this.$store.dispatch('pageContentHide')
  //     } else {
  //       this.$store.dispatch('pageContentShow')
  //     }
  //   }
  // }
}
</script>

<style>
.fade-enter-active {
  transition: opacity .5s;
}
/*进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除*/
.fade-enter {
  opacity: 0;
}
/*离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除*/
.fade-leave {
  opacity: 1;
}
/*离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除*/
.fade-leave-active {
  opacity:0;
  transition: opacity .5s;
}
</style>
